<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>密码找回</title>
<!--===============================================================================================-->
    <link rel="icon" type="image/png" href="/static/images/icons/favicon.ico"/>
<!--===============================================================================================-->
    <!-- <link rel="stylesheet" type="text/css" href="/static/css/retrieve.css"> -->
<!--===============================================================================================-->
<style type="text/css">
    

table{

    border-radius: 5px;
    margin: 0 auto;
    border:1px solid gray;
    background-color:#eee; 
    }
td input{

    width: 235px;
    height: 25px;
    margin-top: 1em;
   }
#code{

    font-size:18px;
    }
#code:hover{
    cursor: pointer;
    }
</style>
</head>
<body onload="changeImg()">

    <center>
        <form action="{{url_for('retire.retire')}}"  method="post">
            <table >
                <caption><h2>找回/修改密码</h2></caption>
                    <tr>
                        <td colspan="2">
                            {% for msg in get_flashed_messages() %}
                            <font color="red">
                                   {{msg}} &nbsp;
                            </font>
                            {% endfor %}
                                
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="text" name="account" class="name" placeholder="请输入账号""></td>
                    </tr>
                <tr>
                    <td colspan="2"><input type="password" name="pwd" class="pwd"  placeholder="新密码"></td>
                </tr>
               <tr>
                   <td class="yzm"><input type="text" style="width: 165px;" name="code" id="codeInput" class="code" placeholder="验证码"></td>
                   <td><span id="code" class="code_pic" title="看不清，换一张"></span>
                   </td>
               </tr>
                <tr>
                   <td>
                       <a href="{{url_for('login.login')}}">返回登录</a>
                   </td>
                    <td>
                        <button type="submit" onclick="return check();">提交</button>
                        
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span class="errorTips" id="errorTips" style="color: red;"></span></td>
                </tr>
                </table>
        </form>
     
    </center>
<script type="text/javascript">
            // 声明一个变量用于存储生成的验证码
    document.getElementById('code').onclick = changeImg;
    function changeImg(){
        // 验证码组成库
        var arrays=new Array(  
            '1','2','3','4','5','6','7','8','9','0',  
            'a','b','c','d','e','f','g','h','i','j',  
            'k','l','m','n','o','p','q','r','s','t',  
            'u','v','w','x','y','z',  
            'A','B','C','D','E','F','G','H','I','J',  
            'K','L','M','N','O','P','Q','R','S','T',  
            'U','V','W','X','Y','Z'               
        ); 
        // 重新初始化验证码
        code ='';
        // 随机从数组中获取四个元素组成验证码
        for(var i = 0; i<4; i++){
            // 随机获取一个数组的下标
            var r = parseInt(Math.random()*arrays.length);
            code += arrays[r];
        }
        // 验证码写入span区域
        document.getElementById('code').innerHTML = code;

    }

    // 验证验证码
    function check(){
        var error;
        // 获取用户输入的验证码
        var codeInput = document.getElementById('codeInput').value;
        if(codeInput.toLowerCase() == code.toLowerCase()){
   
            return true;
        }else{
            error = '验证码错误，重新输入';
            document.getElementById('errorTips').innerHTML = error;
            return false;
        }
    }
    </script>

</body>
</html>